<template>
  <editor :id="'editor'+new Date().getTime()"
          :content="value"
          @on-content-change="onContentChange"
          :uploadJson="global.uploadKEUrl"
          width="100%" height="400px"
          :loadStyleMode="false"
          :formatUploadUrl="false"
          :allowImageRemote="false"
          pluginsPath="/static/kindeditor/plugins/"
          :items="[  'undo', 'redo', '|', 'preview', 'cut', 'copy', 'paste',
                     '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent',
                    'quickformat', 'selectall', '|', 'fullscreen','image',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'hr',  '|']"
  />
</template>

<script>
  // npm install --save kindeditor
  // npm install --save vue-kindeditor
  import VueKindEditor from 'vue-kindeditor'
  import 'kindeditor/kindeditor-all-min.js'
  import 'kindeditor/themes/default/default.css'
  import Vue from 'vue'
  
  Vue.use(VueKindEditor)

  export default {
    name: 'ke-editor',
    props: {
      value: {
        type: String,
        required: true
      }
    },
    methods: {
      onContentChange(val) {
        this.$emit('input', val)
      }
    }
  }
</script>
